<template>
    <div style="background:#ddd;">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>Working Order</span>
            </div>
            <div class="card-item">
                {{'Working Number: ' + quest.workingNumber}}
            </div>
            <div class="card-item">
                {{'Working Place: ' + quest.workingPlaceDesc}}
            </div>
            <div class="card-item">
                {{'Actual Problem: ' }}
                <span v-for="p in quest.problemVoList" :key="p.id">{{p.problemDescription}} </span>
            </div>
            <div class="card-item">
                {{'Cause Of Problem: ' + quest.causeOfProblem}}
            </div>
            <div class="card-item">
                {{'Action: '}}
                <span v-for="p in quest.suggestionVoList" :key="p.id">{{p.suggestion}} </span>
            </div>
            <div class="card-item">
                {{'Point Code :' }}
                <el-table
                        :data="quest.serviceChargeList"
                        style="width: 100%;clear: both">
                    <el-table-column
                            prop="serviceCategory"
                            label="category"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="serviceItem"
                            label="description"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="hours"
                            label="hours">
                    </el-table-column>
                    <el-table-column
                            prop="pointCode"
                            label="pointCode">
                    </el-table-column>
                    <el-table-column
                            prop="serviceUnit"
                            label="unit">
                    </el-table-column>
                    <el-table-column
                            label="Price"
                    >
                        <template slot-scope="scope"> {{scope.row.price *100 * 12 /100}}</template>
                    </el-table-column>
                </el-table>
            </div>

            <div class="card-item">
                Job Information:
                <div v-for="(item ,idx) in quest.jobInformationVoList" :key="idx" style="border: 2px solid #ddd">
                    <div>Arranged By: {{item.arrangeByName}}</div>
                    Receiver: <span v-for="r in item.jobReceiverName">{{r}} |  </span>
                    <div>percentage: {{item.percentage}}%</div>
                    <div>handover: {{item.receiverDateStr}}</div>
                </div>
            </div>
        </el-card>
        <spDataBase :edit="false" @deleteItem="deleteItem" :partList="quest.partList"/>
    </div>
</template>

<script>
    import spDataBase from '../part/spDataBase'

    export default {
        name: "wo-detail-expand",
        props: {
            quest: {
                type: Object
            },
        },
        components: {
            spDataBase
        }
    }
</script>

<style scoped>

</style>